<template>
  <div class="login_background"><img src="../assets/logins_background.jpg" /></div>
  <div class="login_container">
    <div class="login_mian">
      <el-form ref="form" :model="loginData" :rules="rules" hide-required-asterisk="true" label-width="0px">
        <div class="login_title">Shop+ 登 录</div>
        <el-form-item label="" prop="username">
          <el-input v-model="loginData.username" placeholder="用户名 / 邮箱 / 手机号">
            <template #prefix>
              <i class="el-input__icon el-icon-user"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="loginData.password" placeholder="用户密码" type="password" show-password>
            <template #prefix>
              <i class="el-input__icon el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-button @click="login" type="primary" size="small" style="width: 100%">登录</el-button>
        <el-divider><span class="login_or">or</span></el-divider>
        <el-button @click="register" type="info" size="mini" style="width: 100%" plain>注册</el-button>
        <el-link class="login_errorlink" type="info">无法登录？</el-link>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
let loginData = ref({})
let rules = ref({
  username: [{ required: true, message: '用户名不能为空！', trigger: 'blur' }],
  password: [
    { required: true, message: '密码不能为空！', trigger: 'blur' },
    { min: 6, message: '密码不能小于6位！' }
  ]
})
let login = () => {
  proxy.$refs.form.validate((valid) => {
    if (!valid) {
      /* 校验失败 */
      return
    }
    let username = loginData.value.username
    let password = loginData.value.password
    if (!username || !password) {
      proxy.$message({
        message: '用户名或密码不能为空！',
        type: 'warning'
      })
      return
    }
    proxy.$axios.get('https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js').then(function (res) {
      console.log('登陆成功！')
      proxy.$message({
        message: '登陆成功',
        type: 'success'
      })
      window.sessionStorage.setItem('username', username)
      window.sessionStorage.setItem('password', password)
      proxy.$router.push('/admin')
    })
  })
}
let register = () => {}
</script>

<style lang="less" scoped>
.login_title {
  font-size: 26px;
  margin-bottom: 40px;
}

.login_background {
  float: left;
  width: 35%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}

.login_container {
  color: #626f85 !important;
  float: left;
  width: 65%;
  height: 100%;

  /* flex样式呈现*/
  display: flex;
  /*垂直排列*/
  flex-direction: column;
  align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
  justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/

  .login_mian {
    text-align: center;
    //border: 1px solid #eee;
    width: 350px;
    height: 450px;

    .el-divider--horizontal {
      margin: 10px 0;
    }
    .login_or {
      color: #d0d0d0 !important;
    }
    .login_errorlink {
      margin-top: 10px;
    }
  }
}
</style>
